<template>
  <div class="ling-top-text have_task_detail_wrap">
    <h2>任务详情</h2>
    <van-tabs v-model="active" :line-width="37" color="#7AC5EF">
      <van-tab title="任务介绍">
        <TaskDetail :jobDetailOrUserTaskDetail="userTaskDetail" />
        <div class="ling-flexBtn">
          <section>
            <span
              class="ling-linearButton have_task_detail_btn"
              @click="handleEditJobType"
              v-if="
                userTaskDetail.userJobStatus == 'SELECTED' ||
                userTaskDetail.userJobStatus == 'RECEIVED_ORDER'
              "
            >
              {{
                userTaskDetail.userJobStatus == 'SELECTED'
                  ? '已沟通完毕，确认接单'
                  : '任务完成，申请验收'
              }}
            </span>

            <span
              class="blue-color"
              v-if="userTaskDetail.userJobStatus == 'WAITING'"
              >请等待需求方与您联系</span
            >
            <span
              class="blue-color"
              v-else-if="userTaskDetail.userJobStatus == 'SELECTED'"
              >请与需求方进行线下沟通</span
            >
            <span
              class="blue-color"
              v-else-if="userTaskDetail.userJobStatus == 'RECEIVED_ORDER'"
              >已完成接单</span
            >
            <span
              class="ling-linearButton have_task_detail_btn"
              v-else-if="
                userTaskDetail.userJobStatus == 'FINISHED' &&
                userTaskDetail.depositStatus == 'NOT_REFUND'
              "
              @click="handleApplyRefund"
              >申请退押金</span
            >
            <span
              class="blue-color"
              v-else-if="
                userTaskDetail.userJobStatus == 'FINISHED' &&
                userTaskDetail.depositStatus == 'APPLAY_REFUND'
              "
              >押金退款处理中,请稍后</span
            >
            <span class="blue-color" v-else>请等待需求方验收</span>
          </section>
        </div>
      </van-tab>
      <van-tab title="进度汇报">
        <ReportList :userJobId="userTaskDetail.userJobId"></ReportList>
        <div class="ling-flexBtn" v-if="active == 1">
          <span
            class="ling-linearButton have_task_detail_btn"
            @click="
              $router.push({
                path: `/userprogressReport/${userTaskDetail.userJobId}`,
                query: { userJobReportDetail: JSON.stringify({}), type: 'add' },
              })
            "
            >上传进度汇报</span
          >
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ReportList from '../components/ReportList'
import TaskDetail from '../components/TaskDetail'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
import { getIdentity } from '@/utils/userAuth'

export default {
  name: 'haveTaskDetailPage',
  data() {
    return {
      identity: getIdentity(),
      active: 0,
      routeState: this.$route.params,
    }
  },
  created() {
    this.saveRouteState()
  },
  beforeMount() {
    this.getUserTaskDetail(this.routeState.id)
  },
  components: {
    TaskDetail,
    ReportList,
  },
  inject: ['reload'],
  computed: {
    ...mapState(['jobDetail', 'userTaskDetail', 'userDetail']),
  },
  methods: {
    ...mapActions(['getUserTaskDetail', 'editUserJobType', 'applyRefund']),
    saveRouteState() {
      if (this.$route.params.id) {
        //判断当前有参数
        sessionStorage.setItem(
          'taskDetailState',
          JSON.stringify(this.$route.params)
        ) // 存入到sessionStorage中
      } else {
        const recvParam = JSON.parse(sessionStorage.getItem('taskDetailState')) // 当state没有参数时，取sessionStorage中的参数
        this.routeState = recvParam
      }
    },
    async handleEditJobType() {
      const { userJobId, userJobStatus } = this.userTaskDetail
      if (userJobStatus == 'SELECTED') {
        await this.editUserJobType({
          userJobId,
          userJobStatus: 'RECEIVED_ORDER',
        })
        this.reload() //刷新页面
        this.$toast('操作成功')
      } else {
        this.$router.push(`/uploadReport/${userJobId}/${userJobStatus}`)
      }
    },
    //申请退押金
    async handleApplyRefund() {
      const { userJobId } = this.userTaskDetail
      await this.applyRefund(userJobId)
      this.reload() //刷新页面
      this.$toast('操作成功')
    },
  },
}
</script>

<style lang="less" scoped></style>
